<template>
    <div class="bg-light">
      <!-- 头部 -->
      <div class="header d-flex align-items-center">
        <router-link to="/english" class="text-dark">
          <i class="bi bi-chevron-left fs-4"></i>
        </router-link>
        <h5 class="mb-0 mx-auto">乐考无忧</h5>
      </div>
  
      <!-- 年份选择 -->
      <div>
        <div class="year-scroll">
          <span 
            v-for="year in years" 
            :key="year"
            :class="{ active: year === selectedYear }"
            @click="selectYear(year)"
          >
            {{ year }}
          </span>
        </div>
      </div>

      <div class="exam-list">
        <router-link
            v-for="exam in updatedExamList"
            :key="exam.path"
            :to="exam.path"
            class="text-decoration-none text-dark"
        >
          <div class="exam-item">
            <span>{{ exam.title }}</span>
            <div class="d-flex align-items-center">
              <span v-if="exam.lastStudied" class="text-warning me-2">上次学习</span>
              <i class="bi bi-chevron-right"></i>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </template>
  
  <script>
  import http from "@/router/http";
  import {paperTypeDict, moduleTypeDict} from "@/router/dict"
  export default {
    name: 'EnglishExamView',
    data() {
      return {
        years: ['2024', '2023', '2022', '2021', '2020', '2019', '2018', '2017', '2016', '2015'],
        selectedYear: '2024',
        examList: [
          { title: '阅读 Text1', path: '/english/reading-text' ,text: 1},
          { title: '阅读 Text2', path: '/english/reading-text' ,text: 2},
          { title: '阅读 Text3', path: '/english/reading-text' ,text: 3},
          { title: '阅读 Text4', path: '/english/reading-text' ,text: 4},
          { title: '翻译', path: '/english/translation' },
          { title: '完形填空', path: '/english/cloze' },
          { title: '新题型', path: '/english/new-type' },
          { title: '小作文', path: '/english/small-writing' },
          { title: '大作文', path: '/english/large-writing' }
        ]
      }
    },
    computed: {
      // 计算属性，根据selectedYear和examList中的相关数据动态生成带年份参数的路径
      updatedExamList() {
        return this.examList.map(exam => {
          if (exam.path && exam.path.includes('reading-text')) {
            return {
              ...exam,
              path: `/english/reading-text?year=${this.selectedYear}&text=${exam.text}`
            };
          }
          return exam;
        });
      }
    },
    mounted() {
      this.selectedYear = this.$route.query.year
      this.fetchDataFromBackend();
    },
    methods: {
      selectYear(year) {
        this.selectedYear = year
        this.fetchDataFromBackend();
      },
      async fetchDataFromBackend() {
        this.examList = [
          { title: '阅读 Text1', path: '/english/reading-text' ,text: 1},
          { title: '阅读 Text2', path: '/english/reading-text' ,text: 2},
          { title: '阅读 Text3', path: '/english/reading-text' ,text: 3},
          { title: '阅读 Text4', path: '/english/reading-text' ,text: 4},
          { title: '翻译', path: '/english/translation' },
          { title: '完形填空', path: '/english/cloze?year='+this.selectedYear },
          { title: '新题型', path: '/english/new-type?year='+this.selectedYear},
          { title: '小作文', path: '/english/small-writing' },
          { title: '大作文', path: '/english/large-writing' }];
        try {
          const paperType = paperTypeDict.find(item => item.label === '历年真题').value;
          const params = {
            year: this.selectedYear,
            subjectName: 'english',
            paperType: paperType,
          }
          // 假设后端接口地址，你需要根据实际情况修改
          const response = await http.get('/student/question/getQuestionListForEnglish', { params: params });
          const data = response.data;
          if (!data || !data.response) {
            console.error('获取阅读数据失败:', data.message);
            this.isLoading = false;
            return;
          }
          const ydlj = moduleTypeDict.find(item => item.code === 'ydlj').name;
          const wxtk = moduleTypeDict.find(item => item.code === 'wxtk').name;
          if (data && data.code === 1 && data.response) {
            this.examList = [];
            const responseData = data.response;
            let ydljName = [];
            let otherName = [];
            for (const type in responseData) {
              const typeData = responseData[type];
              for (const item of typeData) {
                if(item.name.includes(ydlj)){
                  ydljName.push(item.name);
                }else{
                  otherName.push(item.name)
                }
              }
            }
            let i = 1;
            for (const name of ydljName) {
              const path = `/english/reading-text?year=${this.selectedYear}&text=${i}`;
              const exam = {
                title: "阅读" + " Text"+i,
                path: path,
                text: i
              };
              this.examList.push(exam);
              i++;
            }
            for (const name of otherName) {
              let path = null;
              let lastStudied = false;
              if(name.includes('翻译')){
                 path = `/english/translation?year=${this.selectedYear}`;
              }else if(name.includes(wxtk)){
                  path = `/english/cloze?year=${this.selectedYear}`;
              }else if(name.includes('小作文')){
                  path = `/english/small-writing?year=${this.selectedYear}`;
              }else if(name.includes('大作文')){
                  path = `/english/large-writing?year=${this.selectedYear}`;
              }else if(name.includes('七选五')){
                  path = `/english/new-type?year=${this.selectedYear}`;
              } else{
                  path = null;
              }
              const exam = {
                title: name,
                path: path,
                lastStudied: lastStudied
              };
              this.examList.push(exam);
            }
          }
        } catch (error) {
          console.error('获取后端数据失败:', error);
        }
      }
    },
  }
  </script>
  
  <style scoped>
  body {
    background-color: #f0f9f9;
  }
  
  .header {
    padding: 15px;
    background: white;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  .year-scroll {
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px;
    margin: 10px 0;
  }
  
  .year-scroll span {
    display: inline-block;
    padding: 5px 15px;
    margin-right: 15px;
    font-size: 1.1rem;
    cursor: pointer;
  }
  
  .year-scroll .active {
    color: #40e0d0;
    border-bottom: 2px solid #40e0d0;
  }
  
  .exam-list {
    padding: 15px;
  }
  
  .exam-item {
    background: white;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
  }
  
  .exam-item i {
    color: #40e0d0;
  }
  </style> 